<template>
	<cl-page statusBarBackground="#fff" background-color="#f1f1f1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#0C81F7"
				color="#fff"
				:title="t('bill.mybill.title')"
				:moreTit="t('bill.mybill.history')"
				@more="router.push('/pages/user/bill/history')"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="banner">
				<cl-banner-bill v-model="current" :list="list" type="chain"></cl-banner-bill>
			</view>
			<view class="list">
				<view class="title">{{ $t("bill.mybill.num") }}</view>
				<view class="li mt30" v-for="item in 3">
					<view class="date">{{ $t("bill.mybill.date") }}</view>
					<view class="info" @click="router.push('/pages/user/bill/consumeDetail')">
						<view class="item flex align-center">
							<view class="flex1 left">
								<view class="title overflow1">{{
									cache.lang == "zh"
										? "Filicori 500g 斐兹咖啡 源自意...大利经典浓缩"
										: "Filicori 500g Filicori Coffee... Italian classic concentrate"
								}}</view>
								<view class="type">{{ $t("bill.mybill.consumption") }}</view>
							</view>
							<view class="money">899.00</view>
						</view>
						<view class="item flex align-center">
							<view class="flex1 left">
								<view class="title overflow1">{{ $t("bill.mybill.money") }}</view>
								<view class="type">{{ $t("bill.mybill.withdraw") }}</view>
							</view>
							<view class="money">5000.00</view>
						</view>
					</view>
				</view>
				<cl-loadmore
					background-color="#f1f1f1"
					:loading="false"
					:finish="true"
					:text="$t('loadmore.text')"
					:loading-text="$t('loadmore.loadingText')"
					:finish-text="$t('loadmore.finishText')"
				></cl-loadmore>
			</view>
			<view class="btns flex flex-between" v-if="current == 0">
				<view class="btn1" @click="router.push('/pages/user/bill/stages')">{{
					$t("bill.mybill.fq")
				}}</view>
				<view class="btn2" @click="router.push('/pages/user/bill/repayment')">{{
					$t("bill.mybill.now")
				}}</view>
			</view>
			<view class="btns" v-if="current == 1">
				<view class="btn3" @click="router.push('/pages/user/bill/repayment')">{{
					$t("bill.mybill.before")
				}}</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import { computed, onMounted, reactive, ref } from "vue";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user, cache } = useStore();
const ui = useUi();
const app = useApp();
const current = ref(0);
const list = ref([
	{
		title: cache.lang == "zh" ? "2月账单(应还)" : "February bill (due)",
		text: cache.lang == "zh" ? "剩余应还（元）" : "Surplus repayable",
		money: "1888.00",
		date: cache.lang == "zh" ? "2最后还款日2月10日" : "2 The last payment date is February 10",
	},
	{
		title: cache.lang == "zh" ? "3月账单(待还)" : "March bill (to be returned)",
		text: cache.lang == "zh" ? "剩余应还（元）" : "Surplus repayable",
		money: "2888.00",
		date: cache.lang == "zh" ? "2最后还款日2月10日" : "2 The last payment date is February 10",
	},
	{
		title: cache.lang == "zh" ? "未入账" : "Have not recorded",
		text: cache.lang == "zh" ? "剩余应还（元）" : "Surplus repayable",
		money: "3999.00",
		date: cache.lang == "zh" ? "2最后还款日2月10日" : "2 The last payment date is February 10",
	},
]);
</script>

<style lang="scss" scoped>
.page-info {
	.banner {
		width: 100%;
		// height: 400rpx;
		background: #0c81f7;
		padding: 30rpx 0;
		box-sizing: border-box;

		:deep(.cl-banner) {
			height: 340rpx !important;
			box-sizing: border-box;
		}

		:deep(.cl-banner-item) {
			// background-color: #fff;
			// border-radius: 20rpx;
			background-image: url("/static/images/huankuanbg.png");
			background-size: 100% 100%;
			overflow: hidden;
		}

		:deep(.title) {
			width: 100%;
			height: 87rpx;
			text-indent: 30rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 87rpx;
			// background-color: #f5f5f5;
		}

		:deep(.text) {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 70rpx;
			margin-top: 14rpx;
			text-indent: 30rpx;
		}

		:deep(.money) {
			font-family: PingFangSC;
			font-weight: 500;
			font-size: 72rpx;
			color: #333333;
			line-height: 70rpx;
			text-indent: 30rpx;
		}

		:deep(.date) {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 70rpx;
			text-indent: 30rpx;
		}
	}

	.list {
		padding: 50rpx 30rpx 250rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}

		.li {
			width: 100%;
			background: #ffffff;
			box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.16);
			border-radius: 20rpx;

			.date {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
				line-height: 100rpx;
				padding-left: 30rpx;
				border-bottom: 1rpx solid #eee;
			}

			.info {
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;

				.item {
					width: 100%;
					height: 140rpx;
					border-bottom: 1rpx solid #eee;

					&:last-child {
						border-bottom: none;
					}

					.left {
						width: calc(100% - 150rpx);
					}

					.title {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}

					.money {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						width: 150rpx;
						text-align: right;
					}

					.type {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.btns {
		width: 100%;
		height: 216rpx;
		background: rgba(255, 255, 255, 0.9);
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.btn1 {
			width: 335rpx;
			height: 88rpx;
			background: #ffffff;
			border-radius: 20rpx;
			border: 2px solid #0c81f7;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 38rpx;
			color: #0c81f7;
			line-height: 88rpx;
			text-align: center;
		}

		.btn2 {
			width: 335rpx;
			height: 88rpx;
			background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
			border-radius: 20rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 38rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
		}

		.btn3 {
			width: 100%;
			height: 88rpx;
			background: #ffffff;
			border-radius: 20rpx;
			border: 2px solid #0c81f7;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 38rpx;
			color: #0c81f7;
			line-height: 88rpx;
			text-align: center;
		}
	}
}
</style>
